<template>
	<view class="comment-eg">
		<hb-comment ref="hbComment" 
		@add="add" @del="del" @like="like" @focusOn="focusOn" 
		:deleteTip="'确认删除？'" 
		:cmData="commentData" v-if="commentData">
		</hb-comment>
	</view>
</template>

<script>
	import * as CommentApi from '@/api/event_over_comment.js';
	export default {
		name: 'comment-eg',
		props: {
			articleId: {
				type: String,
				default: () => {
					return null;
				}
			}
		},
		watch: {
			articleId: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						this.getComment(newVal);
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				"commentData": null,
				"reqFlag": false // 请求标志，防止重复操作，true表示请求中

			}
		},
		methods: {
			// 登录校验
			checkLogin() {
				// TODO 此处填写登录校验逻辑
				if (true) {
					return true;
				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				this.checkLogin();
			},
			// 获取评论
			getComment(articleId) {
				console.log("articleId",articleId)
				if (articleId && articleId > 0) {
					CommentApi.list({
						event_nid: this.articleId
					}).then(res => {
						if (res.status == 200) {
							this.commentData = {
								"readNumer": res.data.readNumer,
								"commentSize": res.data.commentList.length,
								"comment": this.getTree(res.data.commentList)
							};
						}
					}).catch(res => {
						this.reqFlag = false;
					})
				}
			},
			// 新增评论
			add(req) {
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}

				let that = this;
				that.reqFlag = true;
				let p = req;
				p.event_nid = that.articleId

				CommentApi.add(p).then(res => {
					if (res.status == 200) {
						// 下边假装请求成功
						that.reqFlag = false;
						that.$refs.hbComment.addComplete();
						that.getComment(that.articleId);
					}
				}).catch(res => {
					this.reqFlag = false;
				})


			},
			// 点赞评论
			like(commentId) {
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				// TODO 接入真实接口
				// this.$u.api.commentLike(commentId).then(res => {
				// 	this.$refs.hbComment.likeComplete(commentId);
				// 	this.reqFlag = false;
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				this.reqFlag = false;
				this.$refs.hbComment.likeComplete(commentId);
			},
			// 删除评论
			del(commentId) {
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				// TODO 接入真实接口
				// this.$u.api.commentDelete(commentId).then(res => {
				// 	this.reqFlag = false;
				// 	this.$refs.hbComment.deleteComplete(commentId);
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })

				CommentApi.del({
					commentId: commentId
				}).then(res => {
					if (res.status == 200) {
						// 下边假装请求成功
						this.reqFlag = false;
						this.$refs.hbComment.deleteComplete(commentId);
					}
				}).catch(res => {
					this.reqFlag = false;
				})


			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			}
		}
	};
</script>

<style>
	.comment-eg{
		background-color: #f4f4f5;
		padding: 15rpx;
		padding-bottom: 50rpx;
	}
</style>